import BaseShopData_blxf from "../GameData/ShopData";
import { EnumManager_blxf } from "../Manager/EnumManager";
import { ConfigModule_blxf } from "../Module/ConfigModule";
import { LoadModule_blxf } from "../Module/LoadModule";
import { UtilsModule_blxf } from "../Module/UtilsModule";


const {ccclass, property} = cc._decorator;

/** 商品item */
@ccclass
export default class ShopItem_blxf extends cc.Component {

    @property({ type: cc.Node, tooltip: '商品图片列表节点' })
    shopImgListNode: cc.Node = null;

    @property({ type: cc.Sprite, tooltip: '商品图片1' })
    shopImg1: cc.Sprite = null;

    @property({ type: cc.Sprite, tooltip: '商品图片2' })
    shopImg2: cc.Sprite = null;

    @property({ type: cc.Node, tooltip: '选中物品列表' })
    markImgBox: cc.Node = null;

    @property({ type: cc.Node, tooltip: '附加图标' })
    extraIcon: cc.Node = null;

    @property({ type: cc.Node, tooltip: '爆竹盒子' })
    firecrackerBox: cc.Node = null;

    
    @property({ tooltip: '传入参数' })
    _data: BaseShopData_blxf = null;

    @property({ tooltip: '是否被标记' })
    _isMark: boolean = false;

    @property({ tooltip: '旋转方向' })
    _dir: number = 0;

    @property({ tooltip: '是否播放爆竹动画'})
    _isAnimation: boolean = false;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    update (dt) {
        this.onUpdateRange_blxf();
    }

    initData_blxf ( data: BaseShopData_blxf ) {
        this._data = data;

        this.updateUI_blxf();

        this.onClearAnimation_blxf();
        this.updateImgState_blxf();

        this.onExtraTween_blxf();

        this.onShowAnimation_blxf();
    }

    updateUI_blxf () {
        let { shopId, shopName, isExtraIcon } = this._data;

        this.updateImg_blxf( this.shopImg1 );
        // this.updateImg_blxf( this.shopImg2 );

        this.markImgBox.children.forEach( (imgItem, index) =>{
            if ( index == 1 ) return;
            let _imgSpr: cc.Sprite = imgItem.getComponent(cc.Sprite);
            this.scheduleOnce(()=>{
                this.updateMarkImg_blxf( _imgSpr );
            }, (index + 1) * 0.1)
        })

        this.extraIcon.active = isExtraIcon;
        this.shopImgListNode.opacity = 255;
    }

    /** 更新标记图片 */
    updateImg_blxf ( imgSpr: cc.Sprite ) {
        let { shopAtlasName, shopImgName } = this._data;

        let _options: object = {
            imgSpr  : imgSpr,
            imgName : shopImgName,
            path    : shopAtlasName,
            cb      : () =>{
                imgSpr.node.opacity = 255;
            }
        };
        imgSpr.node.opacity = 0;
        LoadModule_blxf.instance.LoadImg_blxf( _options );
    }

    /** 更新标记商品图片 */
    updateMarkImg_blxf ( imgSpr: cc.Sprite ) {
        let { shopAtlasName, shopImgName } = this._data;
        let _imgId = shopImgName.split('_')[1];

        shopAtlasName = 'WP_XZ';
        shopImgName = ['wp', _imgId].join('_');

        let _options: object = {
            imgSpr  : imgSpr,
            imgName : shopImgName,
            path    : shopAtlasName,
            cb      : () =>{
                imgSpr.node.opacity = 255;
            }
        };
        imgSpr.node.opacity = 0;
        LoadModule_blxf.instance.LoadImg_blxf( _options );
    }

    /**
     * 检测标记商品
     * @param checkShopId 检测商品id
     * @param isAnimation 是否播放动画
     * @returns 检测是否被标记
     */
    onCheckMarkShop_blxf ( checkShopId: number, isAnimation: boolean ) {
        let _shopId: number = this._data.getShopId_blxf();
        let _isMark: boolean = _shopId == checkShopId;

        if ( this._isMark && isAnimation ) {
            this.onCancelMarkAnimation_blxf();
        } else {
            this.updateImgState_blxf( _isMark );
        }

        return _isMark;
    }

    /** 更新商品图片状态 */
    updateImgState_blxf ( isMark: boolean = false ) {
        this._isMark = isMark;

        this.shopImgListNode.y = isMark ? 10 : 0;
        this.markImgBox.opacity = isMark ? 255 : 0;
    }

    /**
     * 取消标记动画（效果：左右晃动 + 取消选中）
     */
    onCancelMarkAnimation_blxf () {
        let _t1 = 0.06, _t2 = 0.12;
        let _x1 = -8, _x2 = 16;
        cc.tween( this.shopImgListNode )
        .by( _t1, { x: _x1 }, cc.easeSineInOut())
        .by( _t2, { x: _x2 }, cc.easeSineInOut())
        .by( _t1, { x: _x1 }, cc.easeSineInOut())
        .call( ()=>{
            this.shopImgListNode.x = 0;
            this.updateImgState_blxf();
        })
        .start();
    }

    /** 爆竹出现动画 */
    onShowAnimation_blxf () {
        let _shopId: number = this._data.getShopId_blxf();
        if ( _shopId != ConfigModule_blxf.diamondShopId ) return;

        let _isShowSpine: boolean = this._data.getIsShowSpine_blxf();
        if ( !_isShowSpine ) return;

        let { SPINE_GAME_SHOP_DELETE } = EnumManager_blxf.gameSpineType;
        UtilsModule_blxf.instance.createSpine_blxf( SPINE_GAME_SHOP_DELETE, this.node, ( skeleton: sp.Skeleton )=>{

        });

        this._data.setIsShowSpine_blxf();
    }

    /** 光效呼吸动画 */
    onExtraTween_blxf () {
        let { isExtraIcon } = this._data;
        if ( !isExtraIcon ) return;

        let _tween = cc.tween( this.extraIcon )
        .to( 0.5, { opacity: 0 }, cc.easeSineInOut())
        .to( 0.5, { opacity: 255 }, cc.easeSineInOut());

        cc.tween( this.extraIcon ).repeatForever( _tween ).start();
    }

    /** 播放爆竹动画 */
    addAnimation_blxf () {
        if ( this._isAnimation ) return;
        this._isAnimation = true;

        let { SPINE_FIRECRACKER } = EnumManager_blxf.gameSpineType;
        UtilsModule_blxf.instance.createSpine_blxf( SPINE_FIRECRACKER, this.firecrackerBox, ( skeleton: sp.Skeleton )=>{
            this.shopImgListNode.opacity = 0;
        });
    }

    /** 开始旋转 */
    onStartRange_blxf () {
        this._dir = Math.random() > 0.5 ? 1 : -1;
    }

    onUpdateRange_blxf () {
        if ( !this._dir ) return;

        this.node.angle += this._dir * 1;
    }
    
    onClearAnimation_blxf () {
        this._dir = null;
        this.node.angle = 0;
        this.node.scale = 1;
        this.shopImgListNode.x = 0;

        this.firecrackerBox.destroyAllChildren();
    }
}
